<template>
  <div class="common-layout linear-gradient">
    <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" @select="handleMenuSelect">
      <el-menu-item index="0" class="logo">
        <span>报表</span>
      </el-menu-item>
      <el-menu-item index="overview">
        <el-icon><House /></el-icon>
        <span>总览</span>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Operation /></el-icon>
          <span>酸轧2280</span>
        </template>
        <el-menu-item index="TCM2280">
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span>班组报表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Output2280">
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>产量分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Visualization2280">
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>可视化</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Hour2280">
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>小时产量分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Standard2280">
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>钢种宽厚分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="StandardCustomer2280">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户钢种宽厚分析</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Operation /></el-icon>
          <span>连退1630</span>
        </template>
        <el-menu-item index="CAL1630">
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span>班组报表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Output1630" disabled>
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>产量分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Visualization1630" disabled>
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>可视化</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Operation /></el-icon>
          <span>连退2150</span>
        </template>
        <el-menu-item index="CAL2150" disabled>
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span>班组报表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Output2150" disabled>
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>产量分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Visualization2150" disabled>
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>可视化</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><Operation /></el-icon>
          <span>镀锌1870</span>
        </template>
        <el-menu-item index="CGL1870">
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span>班组报表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Output1870">
          <template #title>
            <el-icon><DataBoard /></el-icon>
            <span>产量分析</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Visualization1870">
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>可视化</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>
          <el-icon><Finished /></el-icon>
          <span>质量总览</span>
        </template>
        <el-menu-item index="QualityDaily">质量日报</el-menu-item>
        <el-sub-menu index="6-1">
          <template #title>一冷</template>
          <el-menu-item index="OCMain">主体指标完成情况</el-menu-item>
          <el-menu-item index="OCQuality">质量问题情况</el-menu-item>
          <el-menu-item index="OCCarboard">汽车板生产情况</el-menu-item>
          <el-menu-item index="OCSource">原料质量情况</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="Threecold">三冷</el-menu-item>
        <el-sub-menu index="6-3">
          <template #title>质量填报</template>
          <el-menu-item index="QualityProblem">质量问题情况</el-menu-item>
          <el-menu-item index="QualityDescription">情况说明</el-menu-item>
          <el-menu-item index="QualityCompletion">主体完成指标</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="Highend">冷轧高端报表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="7">
        <template #title>
          <el-icon><User /></el-icon>
          <span>定制报表</span>
        </template>
        <el-menu-item index="Benefit">生产效益</el-menu-item>
        <el-sub-menu index="7-1">
          <template #title>工艺参数</template>
          <el-menu-item index="ParamMain">总览</el-menu-item>
          <el-menu-item index="ParamRate">符合率</el-menu-item>
          <el-menu-item index="ParamDetail">明细</el-menu-item>
          <el-menu-item index="ParamInput">人工录入</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7-2">
          <template #title>合同跟踪</template>
          <el-menu-item index="ContractMain">主机厂</el-menu-item>
          <el-menu-item index="ContractOverdue">逾期合同</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7-3">
          <template #title>停机明细统计</template>
          <el-menu-item index="Shutdown2280">酸轧2280</el-menu-item>
          <el-menu-item index="Shutdown1630">连退1630</el-menu-item>
          <el-menu-item index="Shutdown2150">连退2150</el-menu-item>
          <el-menu-item index="Shutdown1870">镀锌1870</el-menu-item>
          <el-menu-item index="workRate">标准作业率管理</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
    <div class="breadcrumb">
      <el-icon><location /></el-icon>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
          {{ item }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <component :is="currentComponent" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { componentsMap, defaultComponent, menuBreadcrumbMap } from './menuComponents'; // 引入抽离的映射表
  import {
    Histogram,
    House,
    Menu as IconMenu,
    Location,
    User,
    ArrowRight,
    Finished,
    Operation,
    DataBoard,
    DataAnalysis,
  } from '@element-plus/icons-vue';

  import { useAppConfigStore } from '../../store/modules/system/app-config';

  useAppConfigStore().$state.fullScreenFlag = true;
  useAppConfigStore().$state.pageTagFlag = false;

  // 存储当前面包屑内容
  const breadcrumbItems = ref<string[]>(['总览']);
  const currentComponent = ref(defaultComponent);
  const activeIndex = ref('overview');

  const handleMenuSelect = (index: string) => {
    activeIndex.value = index;
    currentComponent.value = componentsMap[index as keyof typeof componentsMap] || defaultComponent;
    // 更新面包屑
    breadcrumbItems.value = menuBreadcrumbMap[index as keyof typeof menuBreadcrumbMap] || ['总览'];
  };
</script>

<style lang="less" scoped>
  @border-radius: 4px;
  @primary-color: rgba(44, 105, 232, 0.1);
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  .common-layout {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    gap: 1vh;
    flex-direction: column;
    // background: url(/@/assets/images/home/body-bg.jpg) no-repeat;
  }

  .el-menu--horizontal {
    --el-menu-horizontal-height: 60px;
  }

  :deep(.el-menu.el-menu-demo) {
    background-color: #060e32;
    .el-menu-item,
    .el-sub-menu__title {
      color: #fff;
      font-size: 16px;
      font-weight: 500;

      &:hover {
        background-color: #fff;
        color: #0878ff;
      }
    }
    .el-menu-item.is-active,
    .el-sub-menu.is-active {
      background-color: #fff;
    }

    .el-sub-menu.is-active .el-sub-menu__title {
      color: #0878ff;
    }
  }

  .logo {
    background-image: url(/src/assets/images/report/report-logo.png);
    min-width: 333px;
    background-size: 100% 100% contain;
    &:hover {
      background-image: url(/src/assets/images/report/report-logo.png); /* 保持背景图不变 */
      filter: none;
      background-color: inherit;
    }

    span {
      font-weight: 400;
      font-size: 36px;
      text-align: left;
      font-family: 'YouSheBiaoTiHei', sans-serif;
      background-image: linear-gradient(to bottom, #ffffff, #a2dfff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 2px rgba(162, 223, 255, 0.8)) drop-shadow(0 0 3px rgba(162, 223, 255, 0.6));
    }
  }

  :deep(.el-menu .el-menu-item.logo:hover) {
    background-color: inherit;
    color: #fff;
  }

  .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 1vw;
    gap: 0.5vw;
    color: #0878ff;
    :deep(.el-breadcrumb__inner) {
      color: #0878ff;
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      font-family: 'Source Han Sans-Regular', sans-serif;
    }
  }
</style>
